<script setup lang='tsx'>
import { ProButton, ProTableOption, ProTableRef, ProTableRequest } from 'tdesign-pro-component';
import { BUTTON_STATUS, MENU_AUTH_STATUS, SHOW_STATUS } from '@/common/const';
import { createMenu, getMenuPage, getMenu, updateMenu, deleteMenu } from '@/api/menu';
import { ProForm } from 'tdesign-pro-component';
import useFormModal from '@/hooks/useFormModal';
import { createMenuFormOption, updateMenuFormOption } from './formOption';
import { ref } from 'vue';
const tableRef = ref<NullAble<ProTableRef>>(null);

const currentId = ref<NullAble<number>>(null);

const tableOptions: ProTableOption<Menu>[] = [
    {
        key: 'id',
        title: '序号',
        width: 100,
        hideInSearch: true
    },
    {
        key: 'name',
        title: '组件名',
        width: 180
    },
    {
        key: 'title',
        title: '标题'
    },
    {
        key: 'path',
        title: '路径',
        hideInSearch: true
    },
    {
        key: 'icon',
        title: '图标',
        hideInSearch: true,
        isSlot: true,
        width: 90
    },
    {
        key: 'button',
        title: '按钮',
        type: 'radio',
        data: BUTTON_STATUS,
        render: ({ row }) => <div>{row.button ? '按钮' : '菜单'}</div>,
        width: 100
    },
    {
        key: 'auth',
        title: '认证状态',
        type: 'radio',
        data: MENU_AUTH_STATUS,
        render: ({ row }) => <div>{row.auth ? '需要认证' : '无需认证'}</div>,
        width: 120
    },
    {
        key: 'permission',
        title: '权限',
        hideInSearch: true
    },
    {
        key: 'show',
        title: '是否展示',
        type: 'radio',
        data: SHOW_STATUS,
        render: ({ row }) => <div>{row.show ? '展示' : '隐藏'}</div>,
    },
    {
        key: 'actions',
        title: '操作',
        hideInSearch: true,
        render: ({ row }) => <div>
            <t-link style="margin-right: 12px;" hover="color" onClick={() => handleEditShow(row)} theme="primary">编辑</t-link>
            <ProButton onConfirm={() => handleDeleteMenu(row.id)} confirmBtn={{ theme: 'danger' }} theme="link" title="系统提示">
                {{
                    default: () => <span>删除</span>,
                    content: () => <span>你正在执行删除操作，确认是否删除【{ row.title }】菜单？</span>
                }}
            </ProButton>
        </div>
    }
]

const [createOpen] = useFormModal(ProForm, {
    options: createMenuFormOption,
    request: () => Promise.resolve(null),
    onSubmit: (data) => {
        createMenu(data).then(() => {
            tableRef.value?.reset();
        });
    }
}, {
    header: '创建菜单',
    width: 600
}, {
    formProps: {
        labelAlign: 'top'
    }
});

const [updateOpen] = useFormModal(ProForm, {
    options: updateMenuFormOption,
    request: async () => {
        return getMenu(currentId.value!)
    },
    onSubmit: (data) => {
        updateMenu({
            ...data,
            id: currentId.value!
        }).then(() => {
            currentId.value = null;
            tableRef.value?.reset();
        });
    }
}, {
    header: '修改菜单',
    width: 600
}, {
    formProps: {
        labelAlign: 'top'
    }
});

async function tableRequest(data: ProTableRequest<Partial<Menu>>) {
    return getMenuPage(data);
}

function handleEditShow(row: Menu) {
    currentId.value = row.id;
    updateOpen();
}

function handleDeleteMenu(id: number) {
    deleteMenu(id).then(() => {
        tableRef.value?.reset();
    });
}
</script>

<template>
    <div>
        <ProTable ref="tableRef" :options="tableOptions" :request="tableRequest">
            <template #pro-table-title>
                <t-button @click="createOpen">
                    <div>
                        创建菜单
                    </div>
                </t-button>
            </template>

            <template #table-icon="{ row }">
                <div>
                    <t-icon :name="row.icon"></t-icon>
                </div>
            </template>
        </ProTable>
    </div>
</template>

<style lang='scss'></style>